<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="开始日" name="start" id="start">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="截止日" name="end" id="end">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn" onclick="xadmin.open('添加图书','./book-add.html',600,500)"><i class="layui-icon"></i>添加</button>
                        </div>
                        <div class="layui-card-body layui-table-body layui-table-main">
							<!-- 数据表格 -->
                            <table id="demo" lay-filter="test"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
		<script>
			layui.use(['table','layer','jquery'], function(){
				
				var table = layui.table;
				var layer = layui.layer;
				var $ = layui.jquery;
				
				table.render({
					elem:"#demo",
					url: 'http://localhost:8080/getBookPage', //数据接口
					request:{
						pageName:"pageNo",
						limitName:"pageSize"
					},
					parseData:function(d){
						var code = d.message.code;
						var msg = d.message.msg;
						var count = d.data.count;
						var data = d.data.obj;
						return{
							"code":code,
							"msg":msg,
							"count":count,
							"data":data
						}
					},
					page: true, //开启分页
					limit:5,
					limits:[5,7,10],
					cols: [[ //表头
						{
							field: 'bookId', 
							title: '图书ID', 
							width:"16.6%",
							sort: true, 
							fixed: 'left',
						},
						{
							field: 'bookName', 
							title: '图书名称', 
							width:"16.6%", 
							sort: true
						},
						{
							field: 'authorName', 
							title: '作者名', 
							width:"16.6%", 
							sort: true
						},
						{
							field: 'price', 
							title: '价格', 
							width:"16.6%", 
							sort: true
						},
						{
							field: 'categoryName', 
							title: '图书类型', 
							width:"16.6%", 
							sort: true,
							templet:function(d){
								return d.category.categoryName;
							}
						},
						{
							field: '操作',
							width:"16.6%",
							templet:function(d){
								var str="<a href='#' class=\"layui-btn layui-btn-xs\" lay-event='edit' >编辑</a>";
								str+="<a href='#' class=\"layui-btn layui-btn-danger layui-btn-xs\" lay-event='del'>删除</a>";
								return str;
							}
						},
					]]
						
				});
				
				//获取删除事件
				table.on("tool(test)",function(d){
					console.log("-------->>>>",d);
					if(d.event=='del'){
						//删除提示,是否删除
						layer.confirm("确认删除?",function(index){
							d.del();
							layer.close(index);
							$.getJSON("http://localhost:8080/deleteBook",{"bookId":d.data.bookId},function(d){
								console.log("删除完成:",d);
								location.reload();
							});
						});
					}else if(d.event=='edit'){
						//弹出更新页面
						layer.open({
							type:2,
							title:"修改图书",
							closeBtn:1,
							anim:6,
							area:['600px','400px'],
							shadeClose:true,
							content:"book-update.html",
							success:function(layero,index){
								console.log(layero,index);
								var body = layer.getChildFrame('body',index);
								body.find("#bookId").val(d.data.bookId);
								body.find("#bookName").val(d.data.bookName);
								body.find("#authorName").val(d.data.authorName);
								body.find("#price").val(d.data.price);
								
								layero.find("iframe").contents().find('[name="categoryId"]').val(d.data.categoryId);
								
								var iframeWindow = layero.find('iframe')[0].contentWindow;
								
								iframeWindow.layui.form.render();
							}
						});
					}
				});
				
			});
		</script>
    </body>
    
</html>